<template>
  <v-scroll native :style="style" bgColor="#304156">
    <el-menu class="el-menu-vertical"
             mode="vertical"
             background-color="#304156"
             :show-timeout="200"
             text-color="#bfcbd9"
             :collapse-transition="false"
             :unique-opened="true"
             active-text-color="#409EFF"
             :default-active="$route.path"
             @open="handleOpen"
             @close="handleClose"
             :collapse="collapse">
      <v-nav-bar-item :routers="routers" :collapse="collapse"/>
    </el-menu>
  </v-scroll>
</template>
<script>
  import view from './view.js'
  import text from './text.js'

  export default {
    name: 'v-nav-bar',
    componentName: 'v-nav-bar',
    mixins: [view, text],
    props: {
      desc: {
        type: String,
        default: 'v-nav-bar'
      },
      collapse: Boolean,
      open: String,
      close: String,
      routers: {
        type: Array
      },
    },
    install: function (Vue) {
      Vue.component('v-nav-bar', this)

    },
    computed: {
      style () {
        let prop = view.getStyle(this.$props)
        console.log(prop)
        return prop
      },
      textStyle () {
        let textProp = text.getTextStyle(this.$props)
        console.log(textProp)
        return textProp
      }
    },
    methods: {
      handleOpen (key, keyPath) {
        this.$emit('open', {key, keyPath})
      },
      handleClose (key, keyPath) {
        this.$emit('close', {key, keyPath})

      }
    }
  }

</script>
<style scoped>
  .el-menu-vertical {
    border-right: 0;
  }

  .el-menu-vertical:not(.el-menu--collapse) {
    width: 150px;
    height: 100%;
  }
  .v-scroll {
    height: 100%;
    position: fixed;
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
  }
</style>
